<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{user.info}">Title</title>
    <script th:inline="javascript">
        var id='';
        function updateUser() {
            var userUuid = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            var userName = document.getElementById("userNameUpdate");
            userName.value = $("#flexigrid-id").getFlexigridiAttrByIndex(2);
            var niceName = document.getElementById("niceNameUpdate");
            niceName.value = $("#flexigrid-id").getFlexigridiAttrByIndex(6);
            var mobile = document.getElementById("mobileUpdate");
            mobile.value = $("#flexigrid-id").getFlexigridiAttrByIndex(5);
            var email = document.getElementById("emailUpdate");
            email.value = $("#flexigrid-id").getFlexigridiAttrByIndex(4);
            console.log(niceName);
            id=userUuid;
            $("#updataForm").show();

        }
        function updateSub(){
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/user/updateUserByUserId}]]*/'',
                data: [{name: "userUuid", value: id},
                    {name: "userName", value: $("#userNameUpdate").val()},
                    {name: "niceName", value: $("#niceNameUpdate").val()},
                    {name: "mobile", value: $("#mobileUpdate").val()},
                    {name: "email", value: $("#emailUpdate").val()}],
                success: function (data) {

                    message(data.msg);
                    $("#updataForm").hide();
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'' );
                }
            });
        }
        function addUser() {
            $("#addForm").show();

        }
        function addSub(){
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/user/addUser}]]*/'',
                data: [{name: "userName", value: $("#userNameAdd").val()},
                    {name: "niceName", value: $("#niceNameAdd").val()},
                    {name: "mobile", value: $("#mobileAdd").val()},
                    {name: "email", value: $("#emailAdd").val()}],
                success: function (data) {

                    message(data.msg);
                    $("#addForm").hide();
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'' );
                }
            });
        }
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
            $("body").css("height",_gridHeight+"px")
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/5;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{getUserInfolistByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.nick}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'userUuid',width : _columnWidth, sortable : true,align : 'center',process:function (y, _trid, _row) {
                        var htmlContent = '<a href="#" onclick="deleteUser( \''+ y + '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
                        return htmlContent;
                    }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true

            });
            queryBtn();
            $("#query-btn-id").click(function (event) {
                event.stopPropagation();//防止冒泡
                queryBtn();
            })
            $("#confire-user-del-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.delete.tip.titile}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid=$("#confire-user-del-id").attr("userUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteUserById}]]*/'',
                                data: [{name: "userUuid", value: userUuid}],
                                success: function (data) {

                                    message(data.msg);
                                    $("#confire-user-del-id").dialog( "close" );
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'' );
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#allocate-btn-id").click(function (event) {
                event.stopPropagation();
                // $("#allocate-dialog-id").dialog("open");
                allocateZtree();
            })

            $("#allocate-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.role.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid=$("#allocate-dialog-id").attr("userUUid")
                            var roleUuids=[];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree");
                            var checkNodes = ztreeObj.getCheckedNodes(true);
                            var menuArray = [];
                            $(checkNodes).each(function (index,item) {
                                roleUuids.push(item.id);
                            });
                            $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{saveRoleByUserId}]]*/'',
                                    data: [
                                        {name:"userUuid",value:userUuid},
                                        {name:"roleUuids",value:roleUuids}
                                    ],
                                    success: function (data) {
                                        message(data.msg);
                                        $("#allocate-dialog-id").dialog( "close" );
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                }
                            );

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })


        });//ready
        // 用户查询
        function queryBtn() {
            var searchUserName = $("#searchUserName").val();
            var searchNiceName = $("#searchNiceName").val();
            var searchPhone = $("#searchPhone").val();
            var searchEmail = $("#searchEmail").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"searchUserName",value:searchUserName},
                    {name:"searchNiceName",value:searchNiceName},
                    {name:"searchPhone",value:searchPhone},
                    {name:"searchEmail",value:searchEmail}
                ]
            }).flexReload();

        }

        function deleteUser(userUuid) {
            $("#confire-user-del-id").attr("userUuid",userUuid);
            $("#confire-user-del-id").dialog('open');
        }

        var allocateSetting = {
            check: {//多选框
                enable: true
            },
            data: {//数据
                simpleData: {
                    enable: true
                }
            }
        };

        function allocateZtree() {
            //获取Uuid
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }

            $("#allocate-dialog-id").attr("userUUid",ids);
            //
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{getRoleZtreeListByUserId}]]*/'',
                    data: [{name:"userUuid",value:ids}],
                    success: function (data) {
                        $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);
                        $("#allocate-dialog-id").dialog('open');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
    </script>
</head>
<body>
<!-- 添加的from表单 -->
<form id="addForm" style="display:none" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="userName" id="userNameAdd" autocomplete="off" placeholder="用户名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
            <input type="text" name="niceName" id="niceNameAdd" autocomplete="off" placeholder="昵称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" name="mobile" id="mobileAdd"  autocomplete="off" placeholder="电话" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" id="emailAdd"  autocomplete="off" placeholder="用户邮箱" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="subAdd">
        <button style="" class="layui-btn" type="button"  id="addsub" onclick="addSub()">提交</button>
    </div>
</form>
<!--修改的from表单 -->
<form class="layui-form" action="" id="updataForm" style="display:none" enctype="multipart/form-data">
    <div class="layui-form-item" style="display:none">
        <label class="layui-form-label">userUuid</label>
        <div class="layui-input-block">
            <input type="text" id="userUuid" name="userUuid"  autocomplete="off" placeholder="userUuid" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="userName" id="userNameUpdate" autocomplete="off" placeholder="用户名" class="layui-input" value="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
            <input type="text" name="niceName" id="niceNameUpdate" autocomplete="off" placeholder="昵称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" name="mobile" id="mobileUpdate"  autocomplete="off" placeholder="电话" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" id="emailUpdate" autocomplete="off" placeholder="用户邮箱" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="subUpdate">
        <button style="" class="layui-btn" type="button"  id="updatasub" onclick="updateSub()">提交</button>
    </div>
</form>
<div>
    <label sec:authorize="hasRole('ROLE_cldk_data_user_query')" th:text="#{user.name}"></label> <input type="text" id="searchUserName"/>
    <label sec:authorize="hasRole('ROLE_cldk_data_user_query')" th:text="#{user.nick}"></label> <input type="text" id="searchNiceName"/>
    <label sec:authorize="hasRole('ROLE_cldk_data_user_query')" th:text="#{user.mobile}"></label> <input type="text" id="searchPhone"/>
    <label sec:authorize="hasRole('ROLE_cldk_data_user_query')" th:text="#{user.email}"></label> <input type="text" id="searchEmail"/>
    <a sec:authorize="hasRole('ROLE_cldk_data_user_query')" class="btn" href="#" onclick="queryBtn();">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}"></span>
    </a>
    <a href="#" id="allocate-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-tower"></i>
        <span th:text="#{user.role.allocate}"></span>
    </a>
</div>



<div>
    <ul class="nav navbar-nav fa-ul" >
        <li sec:authorize="hasRole('ROLE_cldk_data_user_update')">
            <a href="#" onclick="updateUser()">
                <i class="glyphicon glyphicon-wrench"></i>
                <span th:text="#{common.modify}"></span>
            </a>
        </li>

    </ul>
</div>
<div>
    <ul class="nav navbar-nav fa-ul" >
        <li sec:authorize="hasRole('ROLE_cldk_data_user_add')">
            <a href="#" onclick="addUser()">
                <i class="glyphicon glyphicon-plus"></i>
                <span th:text="#{common.add}"></span>
            </a>
        </li>

    </ul>
</div>
<table sec:authorize="hasRole('ROLE_cldk_data_user_query')" id="flexigrid-id"></table>
<div id="confire-user-del-id" style="display: none">
    <span th:text="#{user.delete.tip.info}"></span>
</div>
<div id="allocate-dialog-id" style="display: none">
    <ul id="allocate-user-ztree" class="ztree">

    </ul>
</div>

</body>
</html>
